<template>
  <div class="w h customer-table">
    <div class="el-table">
      <div class="el-table__header">
        <div class="thead">
          <div class="tr">
            <th v-for="(column, c) in dataCollectionLayout" :key="c"
              :style="[{ width: column.width || 'auto' }, column.style || {}]"
              :class="[column?.class]" class="is-leaf el-table__cell">
              {{ column.label }}
            </th>
          </div>
        </div>
      </div>
      <div class="el-table__body-wrapper" style="height:calc(100% - 30px)">
        <div class="tbody w h" v-if="listData && listData.length > 0">
          <div class="el-table__row" tr v-for="(li, l) in listData">
            <div v-for="(column, c) in dataCollectionLayout" :key="c"
              :style="[{ width: column.width || 'auto' }, column.style || {}]"
              :class="[column?.class]" class="el-table__cell">
              <template v-if="column.prop != 'edit'">
                <span v-html="getRenderTableValue(column, li)"></span>
              </template>
            </div>
          </div>
        </div>
        <div v-if="!listData || listData.length <= 0" class="w h a-i-c f-c ">
          <el-empty :image-size="80" description="没有找到相关信息" />
        </div>
      </div>
    </div>
    <div class="w f-e p8 box-b">
      <el-button @click="goBackToPage" type="primary">我知道了</el-button>
    </div>
  </div>
</template>

<script lang="ts">
import frameProperty from '@/mixins/frame-property'
export default {
  name: 'collectionHistory',
  mixins: [frameProperty],
  props: {
    goBackToPage: Function,
    params: [Array, Object]
  },
  data() {
    return {
      dataCollectionLayout: [
        { prop: 'version', label: '版本', width: '100px' },
        { prop: 'dataId', label: '数据集ID', width: '100px' },
        { prop: 'count', label: '数据量', width: '100px' },
        {
          prop: 'status',
          label: '最近导入状态',
          width: '140px',
          format(val: string | number, row: any) {
            return `<div class="f-c a-i-c"><div class="${
              val == 1 ? 'b-s' : 'b-d'
            } w-10 h-10 r">&nbsp;&nbsp;</div>${val == 1 ? '已完成' : '未完成'}</div> `
          }
        },
        { prop: 'dimensionType', label: '标注类型', width: '100px' },
        { prop: 'checkStatus', label: '检查状态', width: '100px' },
        { prop: 'dimensionStatus', label: '标注状态', width: '100px' },
        { prop: 'processingStatus', label: '清洗状态', width: '100px' }
      ],
      listData: [
        {
          version: 'V01',
          dataId: '171819',
          count: '0',
          status: 1,
          dimensionType: '图像分类',
          checkStatus: '未完成',
          dimensionStatus: '0%(0/0)',
          processingStatus: '-'
        },
        {
          version: 'V01',
          dataId: '171819',
          count: '0',
          status: 0,
          dimensionType: '图像分类',
          checkStatus: '未完成',
          dimensionStatus: '0%(0/0)',
          processingStatus: '-'
        }
      ]
    }
  },
  methods: {
    
  }
}
</script>

<style scoped></style>